@()(implicit session: Session)
    @data.main("数据上传") {


        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <b style="font-size: 20px;">数据</b>
                </li>
                <li style="margin-left: 2em;">
                    <a href="routes.BackgroundController.dataUploadBefore()" ><i class="fa fa-cloud-upload"></i>
                        数据导入</a>
                </li>

                <li style="margin-left: 2em;">
                    <a href="routes.BackgroundController.manageBefore()"><i class="fa fa-sliders"></i>
                        数据编辑</a>
                </li>
            </ul>
        </div>


        <div class="row-fluid">

            <div class="row">

                <div class="col-md-12 col-sm-12">
                    <div class="portlet blue-soft box">

                        <div class="portlet-title">
                            <div class="caption">
                                数据导入
                            </div>
                        </div>

                        <div class="portlet-body">


                            <form class="registration-form form-horizontal" id="UploadForm" method="get"
                            accept-charset="UTF-8">

                                <div class="form-group">
                                    <label class="col-sm-12">菌种文件:</label>
                                    <div class="col-sm-4 indent">
                                        <input id="input-1" type="file" class="file" name="file" data-show-preview="false"
                                        data-show-upload="false" accept=".xlsx,.xls" >
                                        <span class="help-block"><a href="@routes.UtilsController.downloadExample()">
                                            <em id="egCrics">Example_File</em></a></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class = "actions indent col-sm-4">
                                        <button type="button" class="btn btn-primary" style="width: 100%;" id="search" onclick="Upload()">
                                            导入</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">

            <div class="row">

                <div class="col-md-12 col-sm-12">
                    <div class="portlet blue-soft box">

                        <div class="portlet-title">
                            <div class="caption">
                                数据查看
                            </div>
                        </div>

                        <div class="portlet-body" >

                            <div id="toolbar"></div>

                            <table class="table table-bordered table-hover " id="table" data-pagination="true" data-search="true"
                            data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
                            >
                                <thead>
                                    <tr>
                                        <th data-field="id">ID</th>
                                        <th data-field="bacteriaNameCh">菌株名称（中文）</th>
                                        <th data-field="bacteriaNameEn">菌株名称（英文）</th>
                                        <th data-field="preservedPeople">保藏人</th>
                                        <th data-field="teacher">指导老师</th>
                                        <th data-field="isSercet">是否保密</th>
                                        <th data-field="preservedDate">保藏日期</th>
                                    </tr>
                                </thead>
                            </table>


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>


                $(function () {

                    $.ajax({
                        url: "routes.BackgroundController.getAllData()",
                        type: "post",
                        success: function (data) {
                            $("#table").bootstrapTable({
                                data: data
                            })
                        }
                    });


                    formValidation();
                });


                function formValidation() {
                    $('#UploadForm').formValidation({
                        framework: 'bootstrap',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            file: {
                                validators: {
                                    notEmpty: {
                                        message: '请选择一个数据文件！'
                                    },
                                    file: {
                                        extension: 'xlsx,xls',
                                        maxSize: 1024 * 1024 * 10,
                                        message: '只支持10M以下excel文件！'
                                    }
                                }
                            }
                        }
                    })
                }


                var time = "";

                function Upload() {
                    var date = new Date();
                    time = date.getTime();

                    var form = $("#UploadForm");
                    var fv = form.data("formValidation");
                    fv.validate();
                    if (fv.isValid()) {
                        var element = "<div id='content'><span id='info'>文件上传中： </span><span id='progress'></span></div>";
                        var index = layer.msg(element, {
                            icon: 16
                            , shade: 0.01,
                            time: 20000000
                        });
                        var form1 = new FormData($("#UploadForm")[0]);
                        $.ajax({
                            url: "routes.BackgroundController.addXlsxfile()",
                            type: "post",
                            dataType: "json",
                            processData: false,
                            contentType: false,
                            data: form1,
                            xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                                myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload) { //检查upload属性是否存在
                                    //绑定progress事件的回调函数
                                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                                }
                                return myXhr; //xhr对象返回给jQuery使用
                            },
                            success: function (data) {
                                layer.close(index);
                                if (data.valid == "false") {
                                    swal("错误", data.message, "error")
                                } else {
                                    swal({
                                        title: " ",
                                        text: "上传成功！",
                                        type: "success"
                                    }, function () {
                                        $.ajax({
                                            url: "routes.BackgroundController.getAllData()",
                                            type: "post",
                                            success: function (data) {
                                                $("#table").bootstrapTable("load", data)
                                            }
                                        });
                                    });
                                }
                            }
                        })
                    }


                }

                $("#input-1").fileinput({
                    showPreview: false,
                    browseLabel: "选择文件",
                    maxFileSize: 1024 * 1024
                })

        </script>


    }